<template>
  <div style="min-height: 100%;background-color: whitesmoke">
    <Sticky>
      <NavBar :title="shopName" left-arrow @click-left="onRevoke"/>
    </Sticky>
    <!--消息列表-->
    <div class="chat-msg">
      <div class="chat-custom" v-for="(item, index) in msgQueue" :key="index">
        <div v-if="item.pos === 0" class="chat-left">
          <div class="chat-head">
            <VanImg fit="fill" width="100%" height="100%" :src="shopInfo.head"></VanImg>
          </div>
          <div class="chat-tag">
            <div class="chat-name">{{shopInfo.name}}</div>
            <span class="chat-content">{{item.msg}}</span>
          </div>
        </div>
        <div v-else class="chat-right">
          <div class="chat-tag">
            <div class="chat-name">{{userInfo.name}}</div>
            <div class="chat-content">{{item.msg}}</div>
          </div>
          <div class="chat-head">
            <VanImg fit="fill" width="100%" height="100%" :src="userInfo.head"></VanImg>
          </div>
        </div>
      </div>

    </div>
    <div style="height: 1.5rem"></div>
    <!-- 输入框-->
    <div class="input-line">
      <Field v-model="msg" rows="1" autosize type="textarea" placeholder="请输入留言...">
        <template #button>
          <VanBtn size="small" type="info" @click="sendMsg">发送</VanBtn>
        </template>
      </Field>
    </div>
  </div>
</template>

<script>
import {NavBar, Image as VanImg, Button as VanBtn, Field, Sticky, Toast} from 'vant'

export default {
  name: 'Chat',
  components: {
    NavBar,
    VanImg,
    Field,
    VanBtn,
    Sticky
  },
  data () {
    return {
      shopName: '',
      userInfo: null,
      shopInfo: null,
      msg: '',
      msgQueue: []
    }
  },
  created () {
    this.shopName = this.$route.params.name
    new Promise(resolve => {
      this.userInfo = {
        name: '新用户',
        head: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F7ea7406d87a0c2b22ce29bed0ab6201d74b0b302.jpg&refer=http%3A%2F%2Fi1.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615544952&t=6ab7b707f340352aaaebaeb8af7506db'
      }
      this.shopInfo = {
        name: '客服',
        head: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=868057542,3295881756&fm=26&gp=0.jpg'
      }
      resolve()
    }).then(() => {
      this.msgQueue = [
        {pos: 0, msg: '你好，请问有什么'},
        {pos: 1, msg: '没有'}
      ]
    })
  },
  methods: {
    sendMsg () {
      if (this.msg === '') {
        Toast('发送消息不能为空')
      } else {
        this.msgQueue.push({pos: 1, msg: this.msg})
        this.msg = ''
      }
    },
    onRevoke () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="less">
  @chat-base-margin: 0.2rem;
  .chat-msg {
    margin: @chat-base-margin @chat-base-margin 0 @chat-base-margin;

    .chat-custom {
      margin: 0.1rem 0;

      .chat-head {
        height: 0.7rem;
        width: 0.7rem;
        border-radius: 0.7rem;
        overflow: hidden;
      }

      .chat-tag {
        flex: 1;
        display: flex;
        flex-direction: column;

        .chat-name {
          color: black;
          margin-bottom: 0.1rem;
        }

        .chat-content {
          background-color: white;
          border-radius: 0.2rem;
          padding: 0.2rem;
        }
      }
    }

    @chat-head-margin: 0.2rem;

    .chat-left {
      display: flex;
      justify-content: flex-start;

      .chat-head {
        margin-right: @chat-head-margin
      }

      .chat-tag {
        margin-right: 20%;
        align-items: flex-start;
      }
    }

    .chat-right {
      display: flex;
      justify-content: flex-end;

      .chat-head {
        margin-left: @chat-head-margin
      }

      .chat-tag {
        margin-left: 20%;
        align-items: flex-end;
      }
    }
  }

  .input-line {
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row;
    background-color: white;
    padding: 0 0.2rem;
    width: 100%;
  }

</style>
